<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrapper {
            display: grid;
            grid-template-areas:
                    'header header header'
                    'content content sidebar'
                    'box-1 box-2 box-3'
                    'footer footer footer';
            grid-gap: 1rem;
        }

        .header {
            grid-area: header;
            text-align: center;
        }

        .content {
            grid-area: content;
        }

        .sidebar {
            grid-area: sidebar;
        }

        .box-1 {
            grid-area: box-1;
        }

        .box-2 {
            grid-area: box-2;
        }

        .box-3 {
            grid-area: box-3;
        }

        .footer {
            grid-area: footer;
            text-align: center;
        }

        .header,
        .content,
        .sidebar,
        .box-1, .box-2, .box-3,
        .footer {
            border: 1px #00bcd4 dashed;
            padding: .5rem;
        }
        
        @media(max-width: 500px) {
            .wrapper {
                grid-template-areas:
                        'header'
                        'content'
                        'sidebar'
                        'box-1'
                        'box-2'
                        'box-3'
                        'footer';
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <h1>网格布局</h1>
        </header>
        <section class="content">
            <h3>Hello World</h3>
            <p>你好世界</p>
        </section>
        <aside class="sidebar">
            <h3>联系我们</h3>
            <ul>
                <li>百度</li>
                <li>谷歌</li>
                <li>腾讯</li>
                <li>阿里</li>
            </ul>
        </aside>
        <div class="box-1">
            <h3>标题一</h3>
            <p>现场秩序v把自行车行政村</p>
        </div>
        <div class="box-2">
            <h3>标题二</h3>
            <p>请问犬瘟热亲热我让他</p>
        </div>
        <div class="box-3">
            <h3>标题三</h3>
            <p>啊是大地方大师傅</p>
        </div>
        <footer class="footer">
            <p>Copyright &copy; 2020</p>
        </footer>
    </div>
</body>
</html>